<!--
 * @Description: 购房人来源分布
 * @Author: py
 * @Date: 2024-11-04
-->
<script setup lang='ts'>
import type { EChartsOption } from 'echarts'

import { usePie } from '@fl/api/data-analysis'
import { Echart } from '@fl/origin-components/Echart'
import { set } from 'lodash-es'

import type { DateRange } from '../types'

const oDateRange = inject<Ref<DateRange>>('dateRange')
if (!oDateRange) {
    throw new Error('dateRange is not provided by an ancestor component.')
}

const chartOptions = reactive({
    series: [
        {
            data: [],
            label: {
                // 标签对齐方式-文字
                alignTo: 'edge',
                // 文字边距，仅当 label.position 为 'outer' 并且 label.alignTo 为 'edge' 时有效
                edgeDistance: 45,
                formatter: '{nameStyle|{b}}\n{valueStyle|{c}人}',
                // 让label位于labelLine之上
                padding: [0, -45],
                rich: {
                    nameStyle: {
                        color: '#000000a5',
                        lineHeight: 16,
                        padding: [15, 0, 8, 0],
                    },
                    valueStyle: {
                        color: '#00000072',
                        padding: [5, 0, 5, 0],
                    },
                },
                show: true,
            },
            labelLayout() {
                // console.log(params)
                return {
                    // align: 'right',
                    // dx: params.labelRect.width,
                    // dy: params.rect.height,
                    dy: -2,
                    verticalAlign: 'bottom',
                }
            },
            // labelLine: {
            //     length: 10,
            //     length2: 40,
            //     lineStyle: {
            //         color: '#0000003f',
            //     },
            //     showAbove: true, // 不生效
            // },
            name: '来源人数分布',
            radius: '60%',
            type: 'pie',
        },
        {
            data: [],
            emphasis: {
                label: {
                    fontSize: 14,
                    fontWeight: 'bold',
                    show: true,
                },
            },
            label: {
                color: '#fff',
                formatter: '{d}%',
                position: 'inside',
                show: true,
            },
            name: '来源占比',
            radius: '60%',
            type: 'pie',
        },
    ],
    // tooltip: {
    //     trigger: 'item'
    // },
}) as EChartsOption

const oParams = computed(() => {
    return {
        endTime: oDateRange.value.endTime,
        startTime: oDateRange.value.startTime,
        type: 1, // 1 购房人来源分布 2 社群分布情况 3 购房人户籍
    }
})
const { data: chartsData, isLoading: chartsLoading } = usePie(oParams)

watchEffect(() => {
    if (chartsData.value) {
        set(
            chartOptions,
            'series[0].data',
            chartsData.value.seriesData,
        )
        set(
            chartOptions,
            'series[1].data',
            chartsData.value.seriesData,
        )
    }
})
</script>

<template>
    <div>
        <h5 class="module-title">
            购房人来源分布
        </h5>

        <div class="chart-container">
            <ElSkeleton :loading="chartsLoading"
                        animated
            >
                <Echart :options="chartOptions"
                        :height="300"
                />
            </ElSkeleton>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';

.chart-container {
    width: 85%;
    margin: 70px auto 0;
    // width: 335px;
    // height: 335px;
}
</style>
